/**
 * 对自定义hooks的理解：就是把重复代码封装成一个函数，通过闭包的方法return出来
 */

import { Button } from "antd";
import { DeleteFilled } from "@ant-design/icons";
import useList from "@/hooks/useList";

export interface ListState {
  id: number;
  name: string;
}

const initialState: ListState[] = [
  { id: 1, name: "x1" },
  { id: 2, name: "x2" },
  { id: 3, name: "x3" }
];

function List() {
  const { state: lists, deleteList } = useList<ListState>(initialState);

  return (
    <ul style={{ listStyle: "none" }}>
      {lists.map((list, index) => (
        <li key={list.id} style={{ margin: 10 }}>
          {index}-{list.name}
          <Button style={{ marginLeft: 5 }} type="primary" icon={<DeleteFilled />} onClick={() => deleteList(index)} />
        </li>
      ))}
    </ul>
  );
}

export default List;
